<!-- TextBox.vue -->
<template>
  <div class="container">
    <div class="head_container">
      <div class="id_container">ID:{{ id }}</div>
      <div class="text_container">奖励</div>
    </div>
    <div class="rich_text_container">
      <span style="width: 72px;height: 24px;color: #c4c4c4;padding-top: 12px;margin-right: 55px">奖励类型</span>
      <div class="el-select-group">
        <el-radio-group v-model="radio" @change="handleSelected">
          <el-radio :value="1" class="spaced-radio">物品</el-radio>
          <el-radio :value="2" class="spaced-radio">档案</el-radio>
          <el-radio :value="3" class="spaced-radio">成就</el-radio>
        </el-radio-group>
      </div>
    </div>

    <div class="reward-Item-container">
      <div class="reward-container">
        <div v-for="(item, index) in rewardsItem" :key="index">
          <div class="forItem-container">
            <div class="reward-form">
              <div class="reward-form-word">
                <span>{{ item?.selectedTitleName || 'XX' }}名称</span>
              </div>
              <div>
                <el-select
                  v-model="item.itemName"
                  filterable
                  placeholder="请选择名称"
                  @visible-change="(visible) => handleVisibleChange(visible, index)"
                  @change="(value)=>handleNameChange(index,value)"
                >
                  <el-option
                    v-for="item in itemNameOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="reward-form" v-if="item.selectedId===1">
              <div class="reward-form-word">
                <span>修改方式</span>
              </div>
              <div>
                <el-select
                  v-model="item.getType"
                  style="height: 50px"
                  filterable
                  placeholder="请选择加还是减"
                  @change="handleTypeSelected(index)"
                >
                  <el-option
                    v-for="item in getTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="reward-form" v-if="item.selectedId!==1">
              <div class="reward-form-word">
                <span>修改方式</span>
              </div>
              <div>
                <el-select
                  v-model="item.getType"
                  style="height: 50px"
                  filterable
                  placeholder="请选择加还是减"
                  @change="handleTypeSelected(index)"
                  disabled
                >
                  <el-option
                    v-for="item in getTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="reward-form">
              <div class="reward-form-word">
                <span>修改数值</span>
              </div>
              <div>
                <el-input-number style="width: 415px;height: 50px" v-model="item.itemNum" :min="1"
                                 :disabled="item.selectedId!==1"/>
              </div>
            </div>
            <div class="reward-form">
              <div class="reward-form-word">
                <span>{{ item?.selectedTitleName || 'XX' }}路径</span>
              </div>
              <div>
                <el-input disabled style="height: 50px" v-model="item.itemPath"
                          placeholder="无需填写,通过选择名称即可自动填充"></el-input>
              </div>
            </div>
            <div class="reward-form" v-if="'itemDesc' in item">
              <div class="reward-form-word">
                <span>{{ item?.selectedTitleName || 'XX' }}描述</span>
              </div>
              <div>
                <el-input disabled v-model="item.itemDesc" style="height: 50px"
                          placeholder="无需填写,通过选择名称即可自动填充"></el-input>
              </div>
            </div>
            <div class="reward-form" v-if="'circleFlag' in item">
              <div class="reward-form-word">
                <span>循环获取</span>
              </div>
              <div class="circle-flag-container">
                <el-radio-group v-model="item.circleFlag" @change="handlecircleFlagSelected">
                  <el-radio :value="1" class="spaced-radio">否</el-radio>
                  <el-radio :value="2" class="spaced-radio">是</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="delete-button" @click="handleDeleteButton(item,index)">
              <el-button>
                是否删除
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="button-container">
      <button class="button" @click="handleButton">
        <img src="/svg/plus.svg" style="background-color: #FF8D1A;border-radius: 50%">
        <span class="button-word">添加新奖励</span></button>
    </div>
    <div class="next_step">下一步:<input
      style="width: 550px;height: 50px;margin-left: 38px;background-color: #232323"
      v-model="nextStep"/></input></div>

    <button class="saveButton" @click="handleSave()">保存</button>
  </div>
</template>

<script lang="ts">
import {defineComponent, PropType, watch} from 'vue';
import {ref} from 'vue'
import {useRouter, useRoute} from "vue-router";
import {getGoodsById} from "@/api/goods";
import {getArchivesById} from "@/api/achieves";
import {getAchievementById} from "@/api/achievement";
import {message} from "@/utils/message";

export default defineComponent({
  name: 'RewardEditor',
  props: {
    id: {
      type: String as PropType<string>,
      default: "0000"
    },
    valueFromParent: {
      type: Object as PropType<Object>,
      required: true,
      default: {
        moduleValue: {
          value: '1',
          nextChapter: 1
        },
        moduleNext: ''
      }
    },
  },
  emits: ['save'], // 定义自定义事件
  setup(props, {emit}) {
    const radio = ref(1)
    const circleFlagRadio = ref(1)
    const rewardsItem = ref(props.valueFromParent.moduleValue.value ? props.valueFromParent.moduleValue.value : [])
    const goodsData = ref([])
    const archivesData = ref([])
    const achievementData = ref([])
    const isFirstGetGoods = ref(true)
    const isFirstGetArchives = ref(true)
    const isFirstGetAchievement = ref(true)
    const route = useRoute()
    const defaultNextId = props.id.split("-")[0] + "-" + (Number(props.id.split("-")[1]) + 1)
    const nextStep = ref(props.valueFromParent?.moduleNext ? props.valueFromParent?.moduleNext : defaultNextId)


    const itemNameOptions = ref([{
      value: 0,
      label: ''
    }])

    const getTypeOptions = [
      {
        value: 1,
        label: '加',
      },
      {
        value: 2,
        label: '减',
      }
    ]

    const createNewItem = () => {
      const newItem = {
        itemName: '',
        itemNum: 1,
        getType: 1,
        itemPath: '',
        selectedTitleName: '',
        itemId: 1,
        selectedId: 1,
      }
      if (radio.value === 2) {
        newItem.itemDesc = null
      }
      if (radio.value === 1) {
        newItem.circleFlag = 1
      }
      return newItem
    };

    const handleVisibleChange = (visible: boolean, index) => {
      if (visible) {
        if (rewardsItem.value[index].selectedTitleName === "物品") {
          goodsData.value.forEach((item, index) => {
            item.label = item.name
            item.value = index
          })
          itemNameOptions.value = goodsData.value
        }
        if (rewardsItem.value[index].selectedTitleName === "档案") {
          archivesData.value.forEach((item, index) => {
            item.label = item.name
            item.value = index
          })
          itemNameOptions.value = archivesData.value
        }
        if (rewardsItem.value[index].selectedTitleName === "成就") {
          achievementData.value.forEach((item, index) => {
            item.label = item.name
            item.value = index
          })
          itemNameOptions.value = achievementData.value
        }
      }
    }

    const handleNameChange = (index, value) => {
      if (rewardsItem.value[index].selectedTitleName === "档案") {
        rewardsItem.value[index].itemDesc = itemNameOptions.value[value].detail
      }
      // if(rewardsItem.value[index].selectedTitleName === "物品"){
      //   rewardsItem.value[index].circleFlag=circleFlagRadio.value
      // }
      rewardsItem.value[index].itemName = itemNameOptions.value[value].name
      rewardsItem.value[index].itemPath = itemNameOptions.value[value].name + "." + itemNameOptions.value[value].image.split(".").pop().toLowerCase();
      rewardsItem.value[index].itemId = itemNameOptions.value[value].id
    }
    const handleTypeSelected = (index) => {
    }
    const handleSelected = () => {
    }

    const handlecircleFlagSelected = () => {
    }

    const handleButton = () => {
      const scriptId = Number(route.query.scriptId)

      const newItem = createNewItem();
      if (radio.value === 1) {
        newItem.selectedTitleName = "物品"
        newItem.selectedId = 1
        console.log("==================")
        console.log(rewardsItem.value)
        newItem.index = rewardsItem.value.length
        if (isFirstGetGoods.value === true) {
          //   获取物品数据
          getGoodsById(scriptId).then(res => {
            if (res.code === "0000") {
              goodsData.value = res.data.list
              isFirstGetGoods.value = false
            }
          })
        }
      }
      if (radio.value === 2) {
        newItem.selectedTitleName = "档案"
        newItem.selectedId = 2
        newItem.index = rewardsItem.value.length
        if (isFirstGetArchives.value === true) {
          //   获取物品数据
          getArchivesById(scriptId).then(res => {
            if (res.code === "0000") {
              archivesData.value = res.data.list
              isFirstGetArchives.value = false
            }
          })
        }
      }
      if (radio.value === 3) {
        newItem.selectedTitleName = "成就"
        newItem.selectedId = 3
        newItem.index = rewardsItem.value.length
        if (isFirstGetAchievement.value === true) {
          //   获取物品数据
          getAchievementById(scriptId).then(res => {
            if (res.code === "0000") {
              achievementData.value = res.data.list
              isFirstGetAchievement.value = false
            }
          })
        }
      }
      rewardsItem.value.push(newItem)
    }
    const handleSave = () => {

      if (rewardsItem.value.length === 0) {
        message("必须创建一个奖励!!", {type: "error"});
        props.valueFromParent.moduleValue.value = rewardsItem.value
        props.valueFromParent.moduleNext = nextStep.value
      } else {
        props.valueFromParent.moduleValue.value = rewardsItem.value
        props.valueFromParent.moduleNext = nextStep.value

        const updatedContent = {...props.valueFromParent};
        emit('save', updatedContent); // 触发save事件并传递
      }
    }
    const handleDeleteButton = (item, index) => {
      console.log("测试删除")
      console.log(item)
      console.log(index)
      rewardsItem.value.splice(index,1)
    }
    watch(() => props.valueFromParent, (newVal) => {
      rewardsItem.value = newVal.moduleValue.value
      nextStep.value = newVal?.moduleNext
    }, {deep: true})

    return {
      radio,
      circleFlagRadio,
      handleSelected,
      handleButton,
      rewardsItem,
      createNewItem,
      goodsData,
      archivesData,
      achievementData,
      getTypeOptions,
      handleTypeSelected,
      handleVisibleChange,
      itemNameOptions,
      handleSave,
      nextStep,
      handleNameChange,
      handlecircleFlagSelected,
      handleDeleteButton
    }
  }
});
</script>
<style>


.el-input.is-disabled .el-input__wrapper {
  background: #232323;
}

.el-input__wrapper {
  background: #232323;
}
</style>

<style scoped>
.delete-button {
  margin-left: 220px;
}

.circle-flag-container {
  padding-top: 12px;
}

.next_step {
  padding-left: 66.5px;
}

::v-deep .el-input {
  width: 415px;
}

.el-select {
  width: 415px;
  padding-top: 10px;
}

::v-deep .el-select__wrapper {
  background-color: #232323;
}

.reward-Item-container {
  height: 380px;
  overflow: auto;
}

.forItem-container {
  margin-bottom: 100px;
}

.reward-container {
}

.button-container {
  padding-left: 198px;
  padding-bottom: 17px;

  .button {
    left: 3713px;
    top: 2928.38px;
    width: 544px;
    height: 50px;
    opacity: 1;
    border-radius: 10px;
    background: #404040;
    box-shadow: 0px 2px 4px #000000;

    .button-word {
      /** 文本1 */
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24.27px;
      color: rgba(255, 141, 26, 1);
      text-align: center;
      vertical-align: top;
    }
  }
}

.reward-form {
  display: flex;
  padding-left: 226px;
  padding-top: 15px;

  .reward-form-word {
    /** 文本1 */
    font-size: 16.18px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24.27px;
    color: rgba(229, 229, 229, 1);
    text-align: left;
    vertical-align: top;
    padding-top: 14px;
    padding-right: 30px;
  }

  .reward-form-select {
    left: 329px;
    top: 195px;
    width: 415px;
    height: 50px;
    opacity: 1;
    border-radius: 10px;
    background: #232323;
    box-shadow: 0px 2px 4px #000000;

  }
}

.spaced-radio {
  padding-right: 70px;
  opacity: 1;
  /** 文本1 */
  font-size: 16.18px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 24.27px;
  color: rgba(229, 229, 229, 1);
  text-align: left;
  vertical-align: top;
}

.el-select-group {
  background-color: #232323;
  width: 544px;
  height: 50px;
  padding-left: 33px;
  padding-top: 10px;
  border-radius: 10px;
}

.rich_text_container {
  display: flex;
  width: 680px;
  height: 50px;
  margin-left: 66.5px;
  margin-top: 10px;
}


.head_container {
  width: 811px;
  height: 55px;
  background-color: #525252;
  display: flex;
  align-items: center;

  .id_container {
    width: 75px;
    height: 25px;
    color: #a3a3a3;
    margin-left: 20px;
    margin-right: 298.5px;
  }

  .text_container {
    width: 44px;
    height: 30px;
  }
}

.container {
  width: 811px;
  height: 720px;
  background-color: #383838;
}

textarea {
  width: 100%;
  box-sizing: border-box;
}

.saveButton {
  height: 60px;
  width: 671px;
  background-color: #ff8d1a;
  color: #78491b;
  margin-left: 66.5px;
  margin-top: 20px;
  border-radius: 10px;
}

html.dark {
  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: #fff;
}


button {
  background-color: #ff8d1a;
  border: none;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 10px;
}

button:hover {
  background-color: #e67e22;
}

</style>
